{% extends 'CatalogMitsubishiBundle:Default:classifications_list.html.twig' %}
{% block breadcrumbs %}
    <a href="{{ path('catalog_mitsubishi_homepage') }}">Выбрать регион, модель, модификацию</a> >> <a href="{{ path('catalog_mitsubishi_classifications_list', {'catalog': catalog, 'catalogNum': catalogNum, 'model': model}) }}">Выбрать комплектацию</a> >> Выбрать группу запчастей
{% endblock breadcrumbs %}
{% block summary %}
    {{ parent() }}
    {% if app.request.cookies.get('classificationsArray') != "" %}
        <b>Комплектация</b>: {{ (app.request.cookies.get('classificationsArray')|json_decode)[classification] }} ({{ classification }})
    {% endif %}
{% endblock summary %}
{% block body %}
<h3>Выбрать группу запчастей:</h3>
    <div class="row">
        <div class="col-xs-10">
            <img src="{{ asset('bundles/catalogmitsubishi/images/'~catalog~'/'~illustration~'.png') }}" usemap="#{{ illustration }}" />
            <map name="{{ illustration }}">
                {% for data in mgroup %}
                    {% if data.code in mgroups|keys %}
                    <area id="area{{ data.code }}" data-name="{{ data.code }}" shape="rect" coords="{{ data.startX }},{{ data.startY }},{{ data.startX+data.endX }},{{ data.startY+data.endY }}" href="{{ path('catalog_mitsubishi_subgroups_list', {'catalog': catalog, 'model': model, 'catalogNum': catalogNum, 'classification': classification, 'mainGroup': data.code}) }}" title="{{ mgroups[data.code] | trans }}"/>
                    <script>
                        $("area#area{{ data.code }}").on("mouseover", function(){
                            $("#mg_{{ data.code }}").addClass("btn-info");
                        });
                        $("area#area{{ data.code }}").on("mouseout", function(){
                            $("#mg_{{ data.code }}").removeClass("btn-info");
                        });
                    </script>
                    {% endif %}
                {% endfor %}
            </map>
        </div>
        <div class="col-xs-2 small">
            {% for key, data in mgroups %}
                <a id="mg_{{ key }}" href="{{ path('catalog_mitsubishi_subgroups_list', {'catalog': catalog, 'model': model, 'catalogNum': catalogNum, 'classification': classification, 'mainGroup': key}) }}"> ({{ key }}) {{ data | trans }}</a><br/>
                <script>
                    $("#mg_{{ key }}").on("mouseover", function(){
                        $('img').mapster('set', true, '{{ key }}');
                    });
                    $("#mg_{{ key }}").on("mouseout", function(){
                        $('img').mapster('set', false, '{{ key }}');
                    });
                </script>
            {% endfor %}
        </div>
    </div>
    <script>
        $('img').mapster({
            fillColor: '70daf1',
            fillOpacity: 0.3,
            mapKey: 'data-name',
            clickNavigate: true
        });
    </script>
{% endblock body %}